<template>
  <div class="my">
    <div class="top">
      <div class="top1">
        <div class="left">
          <img
            v-if="userInfo.photo"
            class="left-img"
            src="@/assets/photo.jpg"
            alt=""
            @click="goInfo"
          />
          <!-- <img class="left-img" src="@/assets/06.jpg" alt="" @click="goInfo" /> -->
          <div class="right-box">
            <div class="left-name">
              {{ userInfo.name }}
              <i class="iconfont icon-nv"></i>
            </div>
            <div class="left-text">
              申请认证
            </div>
          </div>
        </div>
        <div class="right">
          <i class="iconfont icon-shu"></i>
          <b>今日阅读</b>
          <span>34分钟</span>
        </div>
      </div>
    </div>
    <ul class="top2">
      <li class="top2-item">
        <div class="num">{{ userInfo.art_count }}</div>
        <div class="txt">动态</div>
      </li>
      <li class="top2-item">
        <div class="num">{{ userInfo.follow_count }}</div>
        <div class="txt">关注<i class="toast">1</i></div>
      </li>
      <li class="top2-item">
        <div class="num">{{ userInfo.fans_count }}</div>
        <div class="txt">粉丝</div>
      </li>
    </ul>
    <ul class="nav">
      <li>
        <i class="iconfont icon-Collection"></i>
        <p>收藏</p>
      </li>
      <li>
        <i class="iconfont icon-lishi"></i>
        <p>历史</p>
      </li>
      <li>
        <i class="iconfont icon-zuopin1"></i>
        <p>作品</p>
      </li>
    </ul>
    <div class="myCell1">
      <myCell title="消息通知" icon="&#xe642;"></myCell>
      <i class="messageToast">3</i>
      <myCell title="实名认证" icon="&#xe603;"></myCell>
    </div>
    <div class="myCell2">
      <myCell title="用户反馈" icon="&#xe694;"></myCell>
      <!-- <myCell title="在线咨询" icon="&#xe7d5;"></myCell> -->
      <myCell title="系统设置" icon="&#xe62c;" @click.native="goSet"></myCell>
      <myCell
        title="在线咨询"
        icon="&#xe7d5;"
        @click.native="toConsult"
      ></myCell>
      <!-- <myCell title="系统设置" icon="&#xe62c;"></myCell> -->
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
// 组件套用组件:  1.导入  2. 注册  3. 当标签使用
import myCell from './myCell'
import { getData } from '@/api/my.js'
// import { getLocal } from '@/utils/Local.js'
// import { auInfo } from '@/api/my.js'm
export default {
  components: {
    myCell
  },
  data () {
    return {
      userInfo: ''
    }
  },
  // computed: {
  //   ...mapState(['userInfo', 'isLogin'])
  // },
  // created () {
  //   // 只有登录用户才能访问该页面, 没有登录用户有token通过token获取用户信息, 没有token直接返回登录页
  //   if (!this.isLogin) {
  //     if (getLocal('token')) {
  //       auInfo().then(res => {
  //         window.console.log(res)
  //       })
  //     }
  //   }
  // },
  methods: {
    goInfo () {
      this.$router.push('/home/myInfo')
    },
    goSet () {
      this.$router.push('/home/mySet')
    },
    toConsult () {
      console.log('我点击了')
      this.$router.push('/home/consult')
    }
  },
  async created () {
    const res = await getData()
    console.log(res)
    this.userInfo = res.data
  }
}
</script>
<style lang="less" scoped>
.my {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .top {
    height: 150px;
    padding: 20px 0 0 20px;
    // background-color: #f8ce39;
    // background: linear-gradient(to right, #ff6251 0%, #ff9d55 100%);
    background-color: #fff;
    .top1 {
      margin-top: 20px;
      .left {
        float: left;
        .left-img {
          float: left;
          width: 66px;
          height: 66px;
          border-radius: 33px;
          border: 2px solid lightblue;
        }
        .right-box {
          float: right;
          padding-left: 15px;
          vertical-align: middle;
          .left-name {
            vertical-align: center;
            width: 100px;
            height: 15px;
            margin-top: 12px;
            margin-bottom: 15px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0.5px;
            color: #333;
            .iconfont {
              color: #ff4d94;
              font-size: 20px;
            }
          }
          .left-text {
            text-align: center;
            width: 70px;
            height: 18px;
            // padding-top: 5px;
            background-color: #fff;
            border-radius: 16px;
            font-family: MicrosoftYaHei-Bold;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.5px;
            color: #ff4d94;
            border: 1px solid #ff4d94;
          }
        }
      }
      .right {
        float: right;
        width: 94px;
        height: 40px;
        margin-top: 15px;
        border-radius: 20px 0 0 20px;
        background-color: rgba(pink, 0.5);
        position: relative;
        i {
          position: absolute;
          top: 10px;
          left: 10px;
          float: left;
          width: 16px;
          height: 17px;
          color: #333;
        }
        b {
          display: block;
          margin-left: 35px;
          margin-top: 5px;
          font-family: MicrosoftYaHei;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0.5px;
          color: #333;
        }
        span {
          float: left;
          margin-left: 35px;
          margin-top: 2px;
          font-family: MicrosoftYaHei;
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0.5px;
          color: #333;
        }
      }
    }
  }
  .top2 {
    clear: both;
    display: flex;
    justify-content: space-around;
    padding-right: 20px;
    margin: -45px 15px 20px 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    // box-shadow:  0 1px 8px 0 pink;
    li {
      color: #333;
      .num {
        font-family: ArialMT;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
      }
      .txt {
        margin-top: 8px;
        font-family: MicrosoftYaHei;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #333;
        position: relative;
        // vertical-align: middle;
        text-align: center;
        .toast {
          position: absolute;
          top: -40px;
          left: 22px;
          display: inline-block;
          width: 18px;
          height: 18px;
          padding-top: 2px;
          background-color: red;
          color: #fff;
          border-radius: 9px;
          font-style: normal;
          font-size: 10px;
          border: 1px solid #fff;
        }
      }
    }
  }
  .nav {
    // width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    padding-top: 15px;
    margin: 0 15px;
    border-radius: 10px;
    box-shadow: 0 1px 8px 0 pink;
    li {
      height: 51px;
      // margin: 10px;
      // border-right: 1px solid #ccc;
      width: 25%;
      .icon-Collection {
        color: #f08b8b;
        font-size: 22px;
      }
      .icon-lishi {
        color: #ffbd6a;
        font-size: 22px;
      }
      .icon-zuopin1 {
        color: #7c9eff;
        font-size: 22px;
      }
      p {
        margin: 0 0 -10px 0;
        font-family: MicrosoftYaHei;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #333333;
      }
    }
  }
  .myCell1 {
    margin: 40px 15px 40px 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 8px 0 pink;
    position: relative;
    .messageToast {
      position: absolute;
      top: 12px;
      left: 290px;
      display: inline-block;
      height: 20px;
      width: 20px;
      border-radius: 10px;
      background-color: red;
      color: #fff;
      z-index: 10;
      font-size: 12px;
      text-align: center;
      font-style: normal;
      padding-top: 3px;
    }
  }
  .myCell2 {
    margin: 0 15px 15px 15px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 8px 0 pink;
  }
}
</style>
